import React from 'react'

import { Card, Button, Divider, Collapse, Tag } from 'antd'

import {Container} from './style'

import Main from '../../request/main'
const request = new Main()

interface Props {
    history: any
}
interface State {
    activeNames: []
    historyList: []
}
class History extends React.Component<Props, State>{
    readonly state: Readonly<State> = {
        activeNames: [],
        historyList: []
    }

    componentDidMount(){
        this.getHistoryList()
    }

    getHistoryList() {
        request.getPlanList().then(res => {
            let list = res.data.content.list
            this.setState({
                historyList: list.sort((a: any, b: any): number => {
                    return new Date(b.date).getTime() - new Date(a.date).getTime()
                })
            })
        })
    }

    handleCollapse(e: any){
        this.setState({
            activeNames: e
        })
    }

    render(): any{
        return (
            <Container>
                <Card
                    title={<Button type="link" size="large">历史计划都在这哦～</Button>}
                    extra={<span style={{ opacity: 0 }}>1</span>}
                >
                    <div>
                        {
                            this.state.historyList.length !== 0 ? 
                                <Button type="primary" style={{ borderColor: '#67c23a', color: '#67c23a' }} icon="vertical-align-top" ghost onClick={() => this.setState({ activeNames: []})}>全部收起</Button>
                            : ''
                        }
                        <Button type="primary" ghost icon="double-left" onClick={() => this.props.history.push('/home')}>返回首页</Button>
                        <Divider />
                        {
                            this.state.historyList.length === 0 ?
                                <Card>
                                    暂无历史计划哦～
                                </Card>
                                :
                                <div className="main-content">
                                    <Collapse activeKey={this.state.activeNames} onChange={(e) => this.handleCollapse(e)}>
                                        {
                                            this.state.historyList.map((item: any, index: number) => (
                                                <Collapse.Panel header={
                                                    <React.Fragment>
                                                        <span style={{fontSize: 16, fontWeight: 'bold'}}>{item.title}</span><Divider type="vertical" />
                                                        <Tag style={{ color: '#909399', borderColor: '#e9e9eb', backgroundColor: '#f4f4f5',}}>{item.date}</Tag>
                                                        <Tag style={item.state === '1' ? { color: '#67c23a', borderColor: '#e1f3d8', backgroundColor: '#f0f9eb' } : { color: '#f56c6c', borderColor: '#fde2e2', backgroundColor: '#fef0f0' }}>{item.state === '1' ? '已完成' : '未完成'}</Tag>
                                                    </React.Fragment>
                                                } key={index}>
                                                    <p>{item.content}</p>
                                                </Collapse.Panel>
                                            ))
                                        }
                                    </Collapse>
                                </div>
                        }
                    </div>
                </Card>
            </Container>
        )
    }
}

export default History